<template>
    <div class="pad">
        <!-- table start -->
        <tableDataEl
            :page.sync="page"
            :pageSize.sync="pageSize"
            :tableData="tableData.list"
            :tableLabel="tableLabel"
            :pageCount="tableData.rows"
            height="89vh"
            v-loading="loading"
            ImgText="支付凭证"
            @handleDetail="handleDetail"
        />
        <!-- table end -->
        <!-- dialog start -->
        <el-dialog
            :visible.sync="isShowDialog"
            center
            title="详情"
            width="30%"
            v-el-drag-dialog
        >
            <el-form
                    label-width="100px"
                    label-position="right"
                    v-loading="detailLoading"
            >
                <el-form-item label="延迟罚款:">
                    <el-input disabled :value="detailData.delay_fines" size="small"></el-input>
                </el-form-item>
                <el-form-item label="市代分佣:">
                    <el-input disabled :value="detailData.pro" size="small"></el-input>
                </el-form-item>
                <el-form-item label="油品供应商:">
                    <el-input disabled :value="detailData.sm || '无' " size="small"></el-input>
                </el-form-item>
                <el-form-item label="推荐人身份:">
                    <el-input disabled :value="detailData.share_type" size="small"></el-input>
                </el-form-item>
                <el-form-item label="推荐人名称:">
                    <el-input disabled :value="detailData.share_name" size="small"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- dialog end -->
    </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'
    export default {
        name: "throughdownList",
        components: {
            tableDataEl
        },
        data () {
            return {
                page: 1,
                pageSize: 8,
                tableData: {},
                tableLabel: [
                    {
                        label: '市代名称',
                        prop: 'company'
                    },
                    {
                        label: '联系方式',
                        prop: 'phone'
                    },
                    {
                        label: '负责人',
                        prop: 'leader'
                    },
                    {
                        label: '地区',
                        prop: 'city'
                    },
                    {
                        label: '系统使用费',
                        prop: 'price'
                    },
                    {
                        label: '支付凭证',
                        prop: 'voucher',
                        image: true
                    },
                    {
                        label: '申请时间',
                        prop: 'create_time'
                    },
                    {
                        label: '详情',
                        detail: true,
                        btnText: '查看',
                        methodName: 'handleDetail'
                    }
                ],
                loading: false,
                isShowDialog: false,
                detailData: {},
                detailLoading: false
            }
        },
        methods: {
            async init () {
                this.loading = true;
                let res = await this.api.log_agent_auditList();
                res.code ? this.tableData = res.data : this.$message(res.msg);
                this.loading = false;
            },
            async handleDetail (...value) {
                this.isShowDialog = true;
                this.detailLoading = true
                let res = await this.api.log_agent_getDetail({gid: value[1]['gid'], id: value[1]['id']});
                res.code ? this.detailData = res.data : this.$message(res.msg);
                this.detailLoading = false;
            }
        },
        mounted () {
            this.init()
        },
        watch: {
            page () {
                this.init()
            },
            pageSize () {
                this.init()
            }
        }
    }
</script>

<style scoped>
    .pad {
        padding: 10px;
    }
    .el-form-item {
        margin-bottom:10px;
    }
</style>
